<template>
  <div class="container">
    <!-- 操作区域 -->
    <div class="operation-area">
      <!-- 切换内容盒子 -->
      <div class="options">
        <span
          class="option-item"
          :class="{ active: index === selectedOption }"
          v-for="(item, index) in optionTitles"
          :key="item"
          @click="optionClick(index)"
          >{{ item }}</span
        >
      </div>

      <!-- 内容盒子组 -->
      <div class="content-cell-group">
        <!-- 1*1内容块 -->
        <div v-if="selectedOption === 0" class="content-box">
          <content1times1
            v-for="item in itemsInfo1"
            :key="item"
            :content="item"
          />
        </div>
        <!-- 1*2内容块 -->
        <div v-else-if="selectedOption === 1" class="content-box">
          <content1times2
            v-for="item in itemsInfo2"
            :key="item"
            :content="item"
          />
        </div>
        <!-- 2*1内容块 -->
        <div v-else-if="selectedOption === 2" class="content-box">
          <content2times1
            v-for="item in itemsInfo3"
            :key="item"
            :content="item"
          />
        </div>
        <!-- 2*2内容块 -->
        <div v-else-if="selectedOption === 3" class="content-box">
          <content2times2
            v-for="item in itemsInfo4"
            :key="item"
            :content="item"
          />
        </div>
      </div>
    </div>

    <!-- 空盒子 -->
    <div class="blank-cell-group">
      <empty-cell-item v-for="item in 12" :key="item" ref="emptyCells" />
    </div>
  </div>
</template>
<script>
import { getPostion } from "../common/utils";
import EmptyCellItem from "@/components/EmptyCellItem.vue";
import Content1times1 from "@/components/Content1times1.vue";
import Content1times2 from "@/components/Content1times2.vue";
import Content2times1 from "@/components/Content2times1.vue";
import Content2times2 from "@/components/Content2times2.vue";
export default {
  name: "Home",
  components: {
    EmptyCellItem,
    Content1times1,
    Content1times2,
    Content2times1,
    Content2times2,
  },
  data() {
    return {
      optionTitles: [
        "一行一列组件",
        "一行两列组件",
        "两行一列组件",
        "两行两列组件",
      ],

      itemsInfo1: ["1✖1-1", "1✖1-2", "1✖1-3", "1✖1-4"], // 1✖1的内容块中的内容
      itemsInfo2: ["1✖2-1", "1✖2-2"], // 1✖2的内容块中的内容
      itemsInfo3: ["2✖1-1", "2✖1-2"], // 2✖1的内容块中的内容
      itemsInfo4: ["2✖2-1", "2✖2-2"], // 2✖2的内容块中的内容

      // 当前展示盒子页面下标
      selectedOption: 0,
      // 右边的所有空白盒子初始坐标
      emptyCellsPos: [],
    };
  },
  methods: {
    optionClick(index) {
      this.selectedOption = index;
    },
  },

  mounted() {
    this.$nextTick(function () {
      // 获取空白块的坐标，如果获取过了，就不再获取
      if (!this.emptyCellsPos.length) {
        this.emptyCellsPos = [];
        const emptyEls = [];
        this.$refs.emptyCells.forEach((item) => {
          return emptyEls.push(item.$el);
        });
        this.emptyCellsPos = getPostion(emptyEls);
        this.$store.commit("updateEmptyCellsPos", this.emptyCellsPos);
      }
    });
  },
};
</script>
<style>
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/* 右侧的空白组件区域 */
.blank-cell-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 900px;
  height: 522px;
  padding: 6px;
  align-content: space-between;
  background-color: #46c66e;
  justify-content: space-between;
}

/* 左侧的操作区域 */
.operation-area {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
  align-content: center;
}

/* 左侧的可拖动的内容组件 */
.content-cell-group {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.content-box {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* 切换不同子块的选项 */
.options {
  width: 100%;
  display: flex;
  justify-content: center;
  align-self: flex-start;
  text-align: center;
}
.options .option-item {
  display: inline-block;
  width: 120px;
  height: 32px;
  background-color: #ddd;
  color: #666;
  border-radius: 10px;
  line-height: 32px;
  text-decoration: none;
  margin: 10px;
  cursor: pointer;
}

.options .option-item:hover,
.options .option-item.active {
  color: tomato;
  font-weight: 700;
}
</style>
